{% extends '::base.html.twig' %}

{% block title %}{% trans %}Edit My Account{% endtrans %}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('css/bootstrap-tagmanager.css') }}" rel="stylesheet" />
<link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet" />
{% endblock %}

{% block body %}

<div class="row-fluid whiteWrapper">

    <form class="form-horizontal profile" action="{{ path('user_edit') }}" method="post" {{ form_enctype(form) }}>

        {% for formError in form.vars.errors %}
        <div class="alert-error alert">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ formError.message }}
        </div>
        {% endfor %}

        {% if message %}
        <div class="alert-success alert">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {% trans %}Edited Successfully{% endtrans %}.
        </div>
        {% endif %}

        <fieldset>
            <legend>{% trans %}My Profile{% endtrans %}</legend>
            <hr class="smallHr" />

            <div class="control-group">
                <label class="control-label">{% trans %}First Name{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.firstName, {'attr': {'class': 'input-xlarge', 'placeholder': 'First Name' | trans} }) }}
                </div>
            </div>

            {% for formError in form.firstName.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}Last Name{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.lastName, {'attr': {'class': 'input-xlarge', 'placeholder': 'Last Name' | trans} }) }}
                </div>
            </div>

            {% for formError in form.lastName.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}Email{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.email, {'attr': {'class': 'input-xlarge', 'placeholder': 'Email' | trans} }) }}
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    <a href="{{ path('user_change_my_password') }}">{% trans %}Change Password{% endtrans %}</a>
                </div>
            </div>

            {% for formError in form.email.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}Country{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.country, {'attr': {'class': 'input-xlarge '} }) }}
                </div>
            </div>

            {% for formError in form.country.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}City{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.city, {'attr': {'class': 'input-xlarge', 'placeholder': 'City' | trans} }) }}
                </div>
            </div>

            {% for formError in form.city.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}State/Province{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.state, {'attr': {'class': 'input-xlarge', 'placeholder': 'State' | trans} }) }}
                </div>
            </div>

            {% for formError in form.state.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}Highest Education Completed{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.highestEducationCompleted, {'attr': {'class': 'input-xlarge highestEducation'} }) }}
                </div>
            </div>

            {% for formError in form.highestEducationCompleted.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group{% if app.user.highestEducationCompleted != 'Primary Education' %} hidden{% endif %} currentGradeLevel" >
                <label class="control-label">{% trans %}Current Grade Level{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.currentGradeLevel, {'attr': {'class': 'input-xlarge'} }) }}
                </div>
            </div>

            {% for formError in form.currentGradeLevel.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}Current Major/Concentration{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.currentMajorConcentration, {'attr': {'class': 'input-xlarge '} }) }}
                </div>
            </div>

            {% for formError in form.currentMajorConcentration.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}GPA{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.GPA, {'attr': {'class': 'input-xlarge'} }) }}
                </div>
            </div>

            {% for formError in form.GPA.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}Intended Field of Study{% endtrans %}</label>
                <div class="controls">
                    <input type="text" name="intendedField" placeholder="{% trans %}Intended Field of Study{% endtrans %}" class="input-xlarge intendedField" />
                    <span class="help-block">{% trans %}Type and press Enter or , to add multiple values{% endtrans %}.</span>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">{% trans %}Expected Semester of Enrollment{% endtrans %}</label>
                <div class="controls form-inline">
                    <span class="radioBtn">
                    {{ form_widget(form.expectedEnrollmentSemester) }}
                            </span>
                </div>
            </div>

            {% for formError in form.expectedEnrollmentSemester.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}Year{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.expectedSemesterEnrollmentDate, {'attr': {'class': 'input-xlarge'} }) }}
                </div>
            </div>

            {% for formError in form.expectedSemesterEnrollmentDate.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">{% trans %}Desired College/University{% endtrans %}</label>
                <div class="controls">
                    <input type="text" name="tags" placeholder="{% trans %}Desired College/University{% endtrans %}" class="input-xlarge tagManager" />
                    <span class="help-block">{% trans %}Type and press Enter or , to add multiple values{% endtrans %}.</span>
                    {#{ form_widget(form.desiredCollegeUniversity, {'attr': {'class': 'input-xlarge tagManager'} }) }#}
                    <span class="checkbox none">
                        <label>
                            <input name="desiredCollegeUniversityUndecided" type="checkbox" class="undecided" /> Undecided
                        </label>
                    </span>
                </div>
            </div>

            {#% for formError in form.desiredCollegeUniversity.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %#}

            <div class="control-group">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    <p>
                        <a href="{{ path('contact_us') }}">{% trans %}Need Help?{% endtrans %}</a>
                        <br/>
                        {% trans %}Learn more about how we can help you find the right school for you!{% endtrans %}
                    </p>

                </div>
            </div>

            <div class="control-group">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    <label class="checkbox">
                        {{ form_widget(form.messageNotify) }} {% trans %}Notify me by Email when I have a message{% endtrans %}
                    </label>
                </div>
            </div>

            {% for formError in form.messageNotify.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}

            <div class="control-group">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    {{ form_rest(form) }}
                    <button class="btn blue submit" type="submit">{% trans %}Save{% endtrans %}</button>
                </div>
            </div>

        </fieldset>
    </form>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/bootstrap-tagmanager.js') }}"></script>
<script src="{{ asset('js/chosen.jquery.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.chzn-select').chosen();
        $('.tagManager').tagsManager({% if user.desiredCollegeUniversity %}{prefilled: {{ user.getDesiredCollegeUniversities() | raw }}}{% endif %});
        $('.intendedField').tagsManager({typeahead: true, onlyTagList: true, typeaheadSource: {{ user.getValidIntendedStudyField() | keys | json_encode() | raw }}{% if user.intendedStudyField %}, prefilled: {{ user.getIntendedStudyFields() | raw }}{% endif %}});
        $(".undecided").change(function() {
            if (this.checked) {
                $(".tagManager").attr("disabled", true);
            } else {
                $(".tagManager").removeAttr("disabled");
            }
        });

        $(".highestEducation").change(function() {
            if($(".highestEducation").val() === 'Primary Education'){
                $(".currentGradeLevel").removeClass("hidden");
            } else{
                $(".currentGradeLevel").addClass("hidden");
            }
        });
    });
</script>
{% endblock %}